<template>
<el-main>
<el-form ref="form"  label-width="80px">
    <h3>商品管理--添加商品</h3>
    <el-form-item label="商品名称">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item label="商品描述">
      <el-input v-model="subtitle"></el-input>
    </el-form-item>
    <el-form-item label="所属分类">
      <el-select v-model="first_cate_name" placeholder="请选择一级品类" @change="cateChange">
        <el-option v-for="(item,index) in firstList" :key="key" :value="item.name" :label="item.name"></el-option>
      </el-select>
      <el-select v-show="first_cate_name" v-model="second_cate_name"  placeholder="请选择二级品类">
        <el-option v-for="(item,index) in secondList" :key="key" :value="item" :label="item.name"></el-option>
      </el-select>
    </el-form-item>
     <el-form-item label="商品价格">
      <el-input v-model="price"></el-input>
    </el-form-item>
    <el-form-item label="商品库存">
      <el-input v-model="stock"></el-input>
    </el-form-item>
    <el-form-item label="商品图片">
      图片 
    </el-form-item>
    </el-form>

   </el-main>
</template>

<script>
import {categoryList, shopDetail} from "@/request/http";
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
          name: "",
          subtitle: '',
          price: '',
          stock: '',
          list: [],
          first_cate_name:"",
          second_cate_name:"",
          secondList:[],
          firstList:[],
      }
    },
        methods: {
       cateChange(){
         this.firstList.map((item,index)=>{
           if(item.name===this.first_cate_name){
             categoryList({categorID:item.id})
             .then(res2=>{
               console.log(res2)
               this.secondList=res2.data.data
             })
           }
         })
       }

    },
   
 
  }
</script>